import React from "react";
import { sleep } from 'antd-mobile/es/utils/sleep'
const Coupon = () => {
    const [status, setStatus] = React.useState('all') // 0 已使用 1 未使用
    const [hasMore, setHasMore] = React.useState(false)
    const [page, setPage] = React.useState(1)
    const [list, setList] = React.useState([])

    React.useEffect(() => {
        getCouponListData();
    }, [])

    React.useEffect(() => {
        onRefresh();
    }, [status])

    // 滚动底部加载
    const loadMore = async() => 
    {
        await sleep(1000)
        getCouponListData();
    }

    // 下拉刷新
    const onRefresh = async() => 
    {
        setPage(1);
        setList([]);
        setHasMore(true);

        await sleep(1000)
        getCouponListData();
    }

    const getCouponListData = async() => 
    {
        let result = await React.HTTP.post('/business/coupon', {
            page: page,
            busid: React.Business.id,
            status: status
        });

        if (result.code === 0) 
        {
            //没有更多数据
            setHasMore(false);
            return false;
        }
        else
        {
            //设置分页和列表合并
            setHasMore(true);
            setPage(page + 1);
            setList(list.concat(result.data));
        }
    }

    return (
        <>
            <link rel="stylesheet" href="/assets/css/coupon.css" />

            <React.UI.Tabs activeKey={status} onChange={(v:string) => {setStatus(v)}}>
                <React.UI.Tabs.Tab title='全部' key='all'></React.UI.Tabs.Tab>
                <React.UI.Tabs.Tab title='未使用' key='1'></React.UI.Tabs.Tab>
                <React.UI.Tabs.Tab title='已使用' key='0'></React.UI.Tabs.Tab>
            </React.UI.Tabs>

            <React.UI.PullToRefresh onRefresh={onRefresh}>
                <div className="coupon_list">
                    {
                        list.map((item:any) =>{
                            return(
                                <div className="coupon_item" key={item.id}>
                                    <div className="item_content">
                                        <React.Router.NavLink to={`/coupon/info?cid=${item.cid}`}>
                                            <div className="left">
                                            {parseFloat(item.coupon.rate) * 100}<span>折</span>
                                            </div>
                                            <div className="right">
                                                <div>开始时间：{item.coupon.createtime_text}</div>
                                                <div>结束时间：{item.coupon.endtime_text}</div>
                                                <div>领取仅限量 {item.coupon.total} 张，赶快领取！</div>
                                            </div>
                                        </React.Router.NavLink>
                                    </div>
                                    <div className="item_btn">
                                         <React.UI.Button size='small' color='primary' disabled={item.coupon.receive_text == true ? true : false}>{item.coupon.receive_text ? '未使用' : '已使用'}</React.UI.Button>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </React.UI.PullToRefresh>
        </>
    )
}
export default Coupon;